import { List, Avatar } from 'antd'
import PropTypes from 'prop-types'
import { formatTime } from '../utils/time'

const CommentItem = ({ item }) => {
  return <div>
    <div style={{
      display: 'flex'
    }}>
      <Avatar
        style={{
          backgroundColor: '#19f',
          marginRight: 8
        }}
        size={36}
      >{item.createdBy}</Avatar>
      <div style={{ lineHeight: '17px' }}>
        <div><b>{item.createdBy}</b></div>
        <div style={{ fontSize: 12, color: '#999' }}>{formatTime(item.created)}</div>
      </div>
    </div>
    <div style={{
      paddingLeft: 44,
      marginTop: 5,
      wordBreak: 'break-all'
    }}>
      {item.message}
    </div>
  </div>
}

CommentItem.propTypes = {
  item: PropTypes.object.isRequired
}

const CommentList = ({
  listData
}) => {
  return <div className="comment-list">
    <div></div>
    <div>
      <List
        dataSource={listData}
        bordered
        pagination={{
          position: 'bottom',
          pageSize: 5,
          simple: true
        }}
        renderItem={(item) => {
          return <List.Item>
            <CommentItem
              item={item}
            ></CommentItem>
          </List.Item>
        }}
      ></List>
    </div>
  </div>
}

CommentList.propTypes = {
  listData: PropTypes.array
}

export default CommentList